<!--
 * ============LICENSE_START=======================================================
 * SDC
 * ================================================================================
 * Copyright (C) 2021 Nordix Foundation. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
-->

<div class="operation-handler">
    <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>

    <form class="w-sdc-form">

        <div class="side-by-side">
            <div class="form-item">
                <sdc-dropdown
                    label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
                    [required]="true"
                    [testId]="'interface-name'"
                    [selectedOption]="selectedInterfaceType"
                    [placeHolder]="'Select...'"
                    [disabled]="isViewOnly || isEdit"
                    (changed)="onSelectInterface($event)"
                    [options]="interfaceTypeOptions">
                </sdc-dropdown>
            </div>

            <div class="form-item">
                <sdc-dropdown
                    #interfaceOperationDropDown
                    label="{{ 'OPERATION_NAME' | translate }}"
                    [required]="true"
                    [testId]="'operation-name'"
                    [selectedOption]="selectedInterfaceOperation"
                    [placeHolder]="'Select...'"
                    [disabled]="isViewOnly || isEdit"
                    (changed)="onSelectOperation($event)"
                    [options]="interfaceOperationOptions">
                </sdc-dropdown>
            </div>
        </div>

        <div class="form-item">
            <sdc-input
                label="{{'OPERATION_DESCRIPTION' | translate}}"
                [(value)]="operationToUpdate.description"
                testId="interface-operation-description"
                (valueChange)="onDescriptionChange($event)"
                [disabled]=isViewOnly>
            </sdc-input>
        </div>

        <div class="group-with-border content-row">
            <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
            <div class="form-item">
                <sdc-input
                    label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
                    testId="interface-operation-implementation-name"
                    [(value)]="artifactName"
                    (valueChange)="onURIChange($event)"
                    [disabled]=isViewOnly>
                </sdc-input>
            </div>
            <br>
            <div class="form-item">
                <checkbox [label]="'ADD_ARTIFACT_DETAILS' | translate"
                    [(checked)]="enableAddArtifactImplementation"
                    (checkedChange)="onMarkToAddArtifactToImplementation($event)"
                    [disabled]=isViewOnly>
                </checkbox>
            </div>
            <div class="form-item" *ngIf="toscaArtifactTypes && enableAddArtifactImplementation">
                <br>
                <sdc-dropdown
                    label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
                    testId="selectToscaArtifactType"
                    [required]="true"
                    [selectedOption]="toscaArtifactTypeSelected"
                    placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
                    (changed)="onSelectToscaArtifactType($event)"
                    [options]="toscaArtifactTypes"
                    [disabled]=isViewOnly>
                </sdc-dropdown>
            </div>
            <div class="form-item" *ngIf="enableAddArtifactImplementation">
                <sdc-input
                    label="{{ 'ARTIFACT_VERSION' | translate }}"
                    data-tests-id="artifactVersion"
                    [(value)]="artifactVersion"
                    (valueChange)="onArtifactVersionChange($event)"
                    [disabled]=isViewOnly>
                </sdc-input>
            </div>
            <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
                <br>
                <input-list
                    *ngIf="artifactTypeProperties && dataTypeMap"
                    [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
                    [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
                    [inputs]="artifactTypeProperties"
                    [dataTypeMap]="dataTypeMap"
                    [isViewOnly]="isViewOnly"
                    [showToscaFunctionOption]="true"
                    [componentInstanceMap]="componentInstanceMap"
                    [allowDeletion]="false"
                    [customToscaFunctions]="customToscaFunctions"
                    (onInputsValidityChange)="implementationPropsValidityChange($event)"
                    (onValueChange)="onArtifactPropertyValueChange($event)"
                >
                </input-list>
            </div>
        </div>
        <div class="group-with-border content-row" *ngIf="dataTypeMap">
            <input-list
                [title]="'INPUT_LIST_TITLE' | translate"
                [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
                [inputs]="inputs"
                [dataTypeMap]="dataTypeMap"
                [isViewOnly]="isViewOnly"
                [allowDeletion]="true"
                [componentInstanceMap]="componentInstanceMap"
                [showToscaFunctionOption]="true"
                (onValueChange)="onInputValueChange($event)"
                (onInputsValidityChange)="implementationPropsValidityChange($event)"
                (onDelete)="onInputDelete($event)"
            >
            </input-list>
        </div>
        <div class="group-with-border content-row">
            <app-add-input
                [dataTypeMap]="dataTypeMap$"
                [isView]="isViewOnly"
                [existingInputNames]="collectInputNames()"
                (onAddInput)="onAddInput($event)"
            >
            </app-add-input>
        </div>
        <div class="group-with-border content-row">
            <label class="sdc-timeout-label">Timeout : </label>
            <input class="sdc-timeout" type="number" [formControl]="timeoutValue" oninput="this.value = this.valueAsNumber" [ngClass]="{'disabled':isViewOnly}" (change)="timeoutConversion()"/>
            <select class="sdc-timeout-select" [formControl]="timeoutType" (change)="timeoutConversion()" [ngClass]="{'disabled':isViewOnly}">
                <option value="sec">Seconds</option>
                <option value="hour">Hours</option>
                <option value="day">Days</option>
              </select>
        </div>

        <div class="group-with-border content-row" *ngIf="showActivities">
            <label class="sub-operations-label"> Progress Points </label>
            <tabs tabStyle="basic-tabs" [hideIndicationOnTabChange]="true" (tabChanged)="tabChanged($event)">
                <div *ngFor="let milestone of milestones">
                  <tab tabTitle="{{milestone}}" [active]="isActiveTab(milestone)" [highlight]="isInvalidActivity(milestone)">
                    <!-- temporarily disable -->
                      <!--<filters-list
                          [customToscaFunctions]="customToscaFunctions"
                          [activitiesExist]="getExistingActivities(milestone) ? true : false"
                          [isViewOnly]="isViewOnly"
                          [componentInstanceMap]="componentInstanceMap"
                          [existingFilters]="getExistingFilters(milestone)"
                          (filtersChangeEvent)="filtersChangeEvent($event, milestone)">
                      </filters-list>-->
                      <activities-list
                          [isViewOnly]="isViewOnly"
                          [dataTypeMap]="dataTypeMap"
                          [dataTypeMap$]="dataTypeMap$"
                          [componentInstanceMap]="componentInstanceMap"
                          [existingActivities]="getExistingActivities(milestone)"
                          (activitiesChangeEvent)="activitiesChangeEvent($event, milestone)">
                      </activities-list>
                    </tab>
                  </div>
                </tabs>
          </div>
      </form>
  </div>
